
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe67a;</i>
                    <div class="name">账户管理</div>
                    <div class="code">&amp;#xe67a;</div>
                    <div class="fontclass">.zhanghuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66b;</i>
                    <div class="name">通勤设置 三级</div>
                    <div class="code">&amp;#xe66b;</div>
                    <div class="fontclass">.tongqinshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66a;</i>
                    <div class="name">通勤监控</div>
                    <div class="code">&amp;#xe66a;</div>
                    <div class="fontclass">.tongqinjiankong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe683;</i>
                    <div class="name">项目管理</div>
                    <div class="code">&amp;#xe683;</div>
                    <div class="fontclass">.xiangmuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69f;</i>
                    <div class="name">车辆派单</div>
                    <div class="code">&amp;#xe69f;</div>
                    <div class="fontclass">.cheliangpaidan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe719;</i>
                    <div class="name">赞_S</div>
                    <div class="code">&amp;#xe719;</div>
                    <div class="fontclass">.zans</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71c;</i>
                    <div class="name">验证码</div>
                    <div class="code">&amp;#xe71c;</div>
                    <div class="fontclass">.yanzhengma</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ff;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xe6ff;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6df;</i>
                    <div class="name">简约的</div>
                    <div class="code">&amp;#xe6df;</div>
                    <div class="fontclass">.jianyuede</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e0;</i>
                    <div class="name">经济的</div>
                    <div class="code">&amp;#xe6e0;</div>
                    <div class="fontclass">.jingjide</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e2;</i>
                    <div class="name">高端的</div>
                    <div class="code">&amp;#xe6e2;</div>
                    <div class="fontclass">.gaoduande</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e3;</i>
                    <div class="name">奢华的</div>
                    <div class="code">&amp;#xe6e3;</div>
                    <div class="fontclass">.shehuade</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ec;</i>
                    <div class="name">自由安排</div>
                    <div class="code">&amp;#xe6ec;</div>
                    <div class="fontclass">.ziyouanpai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ea;</i>
                    <div class="name">增加</div>
                    <div class="code">&amp;#xe6ea;</div>
                    <div class="fontclass">.zengjia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6cd;</i>
                    <div class="name">想去_fill</div>
                    <div class="code">&amp;#xe6cd;</div>
                    <div class="fontclass">.xiangqufill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6cb;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe6cb;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6d5;</i>
                    <div class="name">少购物</div>
                    <div class="code">&amp;#xe6d5;</div>
                    <div class="fontclass">.shaogouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c6;</i>
                    <div class="name">好评</div>
                    <div class="code">&amp;#xe6c6;</div>
                    <div class="fontclass">.haoping</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c2;</i>
                    <div class="name">差评</div>
                    <div class="code">&amp;#xe6c2;</div>
                    <div class="fontclass">.chaping</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b9;</i>
                    <div class="name">下拉</div>
                    <div class="code">&amp;#xe6b9;</div>
                    <div class="fontclass">.xiala</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ba;</i>
                    <div class="name">下一步</div>
                    <div class="code">&amp;#xe6ba;</div>
                    <div class="fontclass">.xiayibu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b8;</i>
                    <div class="name">收起</div>
                    <div class="code">&amp;#xe6b8;</div>
                    <div class="fontclass">.shouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe696;</i>
                    <div class="name">系统菜单</div>
                    <div class="code">&amp;#xe696;</div>
                    <div class="fontclass">.xitongcaidan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68f;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe68f;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe692;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xe692;</div>
                    <div class="fontclass">.shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67d;</i>
                    <div class="name">洗衣机</div>
                    <div class="code">&amp;#xe67d;</div>
                    <div class="fontclass">.xiyiji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe673;</i>
                    <div class="name">想去</div>
                    <div class="code">&amp;#xe673;</div>
                    <div class="fontclass">.xiangqu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe666;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xe666;</div>
                    <div class="fontclass">.shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe665;</i>
                    <div class="name">时间</div>
                    <div class="code">&amp;#xe665;</div>
                    <div class="fontclass">.shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe644;</i>
                    <div class="name">时间</div>
                    <div class="code">&amp;#xe644;</div>
                    <div class="fontclass">.0032shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe647;</i>
                    <div class="name">票</div>
                    <div class="code">&amp;#xe647;</div>
                    <div class="fontclass">.0035piao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64b;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe64b;</div>
                    <div class="fontclass">.0095gouwuche01</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64d;</i>
                    <div class="name">折扣</div>
                    <div class="code">&amp;#xe64d;</div>
                    <div class="fontclass">.0097zhekou01</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe659;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xe659;</div>
                    <div class="fontclass">.0021sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe658;</i>
                    <div class="name">我的</div>
                    <div class="code">&amp;#xe658;</div>
                    <div class="fontclass">.0020wode</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">_0048_集合订单</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.0048jihedingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">_0052_改签</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.0052gaiqian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b3;</i>
                    <div class="name">门票</div>
                    <div class="code">&amp;#xe6b3;</div>
                    <div class="fontclass">.shixin35menpiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe622;</i>
                    <div class="name">_0040_度假</div>
                    <div class="code">&amp;#xe622;</div>
                    <div class="fontclass">.0040dujia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe624;</i>
                    <div class="name">_0049_未付订单</div>
                    <div class="code">&amp;#xe624;</div>
                    <div class="fontclass">.0049weifudingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe625;</i>
                    <div class="name">_0050_订单</div>
                    <div class="code">&amp;#xe625;</div>
                    <div class="fontclass">.0050dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63a;</i>
                    <div class="name">_0092_收藏-01</div>
                    <div class="code">&amp;#xe63a;</div>
                    <div class="fontclass">.0092shoucang01</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe637;</i>
                    <div class="name">_0089_设置-01</div>
                    <div class="code">&amp;#xe637;</div>
                    <div class="fontclass">.0089shezhi01</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe788;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xe788;</div>
                    <div class="fontclass">.yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe784;</i>
                    <div class="name">红包</div>
                    <div class="code">&amp;#xe784;</div>
                    <div class="fontclass">.hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe785;</i>
                    <div class="name">信用卡</div>
                    <div class="code">&amp;#xe785;</div>
                    <div class="fontclass">.xinyongqia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78b;</i>
                    <div class="name">sale</div>
                    <div class="code">&amp;#xe78b;</div>
                    <div class="fontclass">.sale</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78c;</i>
                    <div class="name">赠送</div>
                    <div class="code">&amp;#xe78c;</div>
                    <div class="fontclass">.zengsong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe779;</i>
                    <div class="name">向左1</div>
                    <div class="code">&amp;#xe779;</div>
                    <div class="fontclass">.xiangzuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe761;</i>
                    <div class="name">喜欢</div>
                    <div class="code">&amp;#xe761;</div>
                    <div class="fontclass">.xihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe75f;</i>
                    <div class="name">物流</div>
                    <div class="code">&amp;#xe75f;</div>
                    <div class="fontclass">.wuliu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe75a;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xe75a;</div>
                    <div class="fontclass">.tuikuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe74f;</i>
                    <div class="name">时钟</div>
                    <div class="code">&amp;#xe74f;</div>
                    <div class="fontclass">.shizhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe736;</i>
                    <div class="name">店铺</div>
                    <div class="code">&amp;#xe736;</div>
                    <div class="fontclass">.dianpu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe737;</i>
                    <div class="name">订单</div>
                    <div class="code">&amp;#xe737;</div>
                    <div class="fontclass">.dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe731;</i>
                    <div class="name">圆形选中</div>
                    <div class="code">&amp;#xe731;</div>
                    <div class="fontclass">.yuanxingxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe655;</i>
                    <div class="name">clothing</div>
                    <div class="code">&amp;#xe655;</div>
                    <div class="fontclass">.clothing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67f;</i>
                    <div class="name">diamond</div>
                    <div class="code">&amp;#xe67f;</div>
                    <div class="fontclass">.diamond</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3503;</i>
                    <div class="name">宝贝</div>
                    <div class="code">&amp;#x3503;</div>
                    <div class="fontclass">.baobei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345e;</i>
                    <div class="name">数码</div>
                    <div class="code">&amp;#x345e;</div>
                    <div class="fontclass">.shuma</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3463;</i>
                    <div class="name">鞋子</div>
                    <div class="code">&amp;#x3463;</div>
                    <div class="fontclass">.xiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3464;</i>
                    <div class="name">包包</div>
                    <div class="code">&amp;#x3464;</div>
                    <div class="fontclass">.baobao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe73a;</i>
                    <div class="name">repair_fill</div>
                    <div class="code">&amp;#xe73a;</div>
                    <div class="fontclass">.repairfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe738;</i>
                    <div class="name">repair</div>
                    <div class="code">&amp;#xe738;</div>
                    <div class="fontclass">.repair</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e0;</i>
                    <div class="name">redpacket</div>
                    <div class="code">&amp;#xe6e0;</div>
                    <div class="fontclass">.redpacket</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe708;</i>
                    <div class="name">countdown</div>
                    <div class="code">&amp;#xe708;</div>
                    <div class="fontclass">.countdown</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b0;</i>
                    <div class="name">qr_code</div>
                    <div class="code">&amp;#xe6b0;</div>
                    <div class="fontclass">.qrcode</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6af;</i>
                    <div class="name">cart</div>
                    <div class="code">&amp;#xe6af;</div>
                    <div class="fontclass">.cart</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">collect</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.collect</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b8;</i>
                    <div class="name">account</div>
                    <div class="code">&amp;#xe6b8;</div>
                    <div class="fontclass">.account</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6da;</i>
                    <div class="name">electronics</div>
                    <div class="code">&amp;#xe6da;</div>
                    <div class="fontclass">.electronics</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e3;</i>
                    <div class="name">auto</div>
                    <div class="code">&amp;#xe6e3;</div>
                    <div class="fontclass">.auto</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe651;</i>
                    <div class="name">加星收藏</div>
                    <div class="code">&amp;#xe651;</div>
                    <div class="fontclass">.jiaxingshoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0224;</i>
                    <div class="name">3.1 返回2</div>
                    <div class="code">&amp;#xf0224;</div>
                    <div class="fontclass">.31fanhui2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0213;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xf0213;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0216;</i>
                    <div class="name">3.1 密码</div>
                    <div class="code">&amp;#xf0216;</div>
                    <div class="fontclass">.31mima</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0217;</i>
                    <div class="name">3.1 评论</div>
                    <div class="code">&amp;#xf0217;</div>
                    <div class="fontclass">.31pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01ab;</i>
                    <div class="name">3.1收藏</div>
                    <div class="code">&amp;#xf01ab;</div>
                    <div class="fontclass">.31shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00a8;</i>
                    <div class="name">搜索，猫客</div>
                    <div class="code">&amp;#xf00a8;</div>
                    <div class="fontclass">.sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe659;</i>
                    <div class="name">还款</div>
                    <div class="code">&amp;#xe659;</div>
                    <div class="fontclass">.huankuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64d;</i>
                    <div class="name">医疗</div>
                    <div class="code">&amp;#xe64d;</div>
                    <div class="fontclass">.yiliao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64c;</i>
                    <div class="name">学习</div>
                    <div class="code">&amp;#xe64c;</div>
                    <div class="fontclass">.xuexi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe645;</i>
                    <div class="name">居家</div>
                    <div class="code">&amp;#xe645;</div>
                    <div class="fontclass">.jujia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe648;</i>
                    <div class="name">美容</div>
                    <div class="code">&amp;#xe648;</div>
                    <div class="fontclass">.meirong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01e3;</i>
                    <div class="name">树</div>
                    <div class="code">&amp;#xf01e3;</div>
                    <div class="fontclass">.shu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00ac;</i>
                    <div class="name">植物</div>
                    <div class="code">&amp;#xf00ac;</div>
                    <div class="fontclass">.zhiwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">iconfont-xingxing</div>
                    <div class="code">&amp;#xe628;</div>
                    <div class="fontclass">.iconfontxingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f0;</i>
                    <div class="name">半颗星</div>
                    <div class="code">&amp;#xe6f0;</div>
                    <div class="fontclass">.bankexing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c9;</i>
                    <div class="name">收藏_fill</div>
                    <div class="code">&amp;#xe6c9;</div>
                    <div class="fontclass">.shoucangfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3432;</i>
                    <div class="name">收藏夹</div>
                    <div class="code">&amp;#x3432;</div>
                    <div class="fontclass">.shoucangjia</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
